<template>
	<div style="width: 50%;display: inline-block;vertical-align: top;"  class="pl10 pr10 mb12">
		<el-tabs v-model="activeName" type="card">
			<el-tab-pane :label="'预警('+dataList1.warningList.length+')'" name="first">
				<div
					style="height: 220px;overflow-y: auto;padding:18px 35px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;"
					class="bgfff">
					<el-empty v-if="dataList1.warningList && dataList1.warningList.length == 0"
						style="height: 190px;" :imageSize="80"></el-empty>
					<div v-for="(item,index) in dataList1.warningList" :key="index" @click="gotoWarnDet(item)"
						class="point mb15 font13">
						<div class="displayFlexBet point" slot="reference" style="color: #5A5A5A;">
							<div style="flex: 4;" class="textOver">
								<span>{{index+1}}. </span>
								<span>{{item.problemContent}}</span>
							</div>
							<div style="flex: 1;">{{item.planSolvedByName}}</div>
							<span style="flex: 1;color: #333;text-align: right;color: #888;">
								{{item.dateDiffStr}}
								<span v-if="item.status == 'OVER_TIME'">· {{item.statusStr}}</span>
							</span>
						</div>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane :label="'问题工单('+dataList1.problemList.length+')'" name="second">
				<div
					style="height: 220px;overflow-y: auto;padding:18px 35px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;"
					class="bgfff">
					<el-empty v-if="dataList1.problemList && dataList1.problemList.length == 0"
						style="height: 190px;" :imageSize="80"></el-empty>
					<div v-for="(item,index) in dataList1.problemList" :key="index" @click="gotoPageNew(item)"
						class="point mb15 font13">
	
						<div class="displayFlexBet point" slot="reference">
							<div style="flex: 4;" class="textOver">
								<span>{{index+1}}. </span>
								<span>{{item.problemContent}}</span>
							</div>
							<div style="flex: 1;">{{item.executeByName}}</div>
							<span style="flex: 1;color: #333;text-align: right;color: #888;">
								{{item.dateDiffStr}}
								<span v-if="item.status == 'OVER_TIME'">· {{item.statusStr}}</span>
							</span>
						</div>
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	let that
	import HomeMock from "@/assets/mock/HomeMock.json"

	export default {
		data() {
			return {
				activeName: "first",
				dataList1: {
					warningList:[],
					problemList:[]
				},
				loading3: true,
				listHeaderMock: {
					mock1: false,
				}
			}
		},
		mounted: function() {
			that = this
			that.getHomePageScheduleInfosV2()
		},

		methods: {
			getHomePageScheduleInfosV2() {
				that.loading3 = true
				that.ajax({
					url: '/documentEntSchedule/getHomePageScheduleInfosV2',
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(result) {
						that.listHeaderMock.mock1 = false
						if (result.status == -6) {
							result.data = HomeMock.daiBan
							that.listHeaderMock.mock1 = true
						}
						if (result.data) that.dataList1 = result.data
						that.loading3 = false
					},
				}, false)
			},
		}
	}
</script>

<style scoped>
>>>.el-tabs__header {
		margin-bottom: 0px;
	}

	>>>.el-tabs__item.is-active {
		color: #FF6407;
		font-weight: bold;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		background: linear-gradient(0deg, #FFFFFF, #FDEFEA);
	}

	>>>.el-tabs--card>.el-tabs__header .el-tabs__nav {
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
	}

	>>>.el-tabs__nav {
		width: 100%;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		background: #EBEBEB;
	}

	>>>.el-tabs__item {
		width: 50%;
		border: unset;
		border-color: unset;
		text-align: center;
	}

	>>>.el-tabs--card>.el-tabs__header .el-tabs__item.is-active,
	.el-tabs--card>.el-tabs__header .el-tabs__item,
	.el-tabs--card>.el-tabs__header,
	.el-tabs--card>.el-tabs__header .el-tabs__nav {
		border-color: unset;
	}

	>>>.el-tabs--card>.el-tabs__header .el-tabs__item {
		border-bottom: unset;
		border-left: unset;
	}
</style>